<!DOCTYPE html>

<html lang="en" ng-app="appname">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
    <title>Pendar Yousefi: Goals in AdWords</title>
    <meta name="description" content="Pendar Yousefi's work on Project Compass" />
    <meta name="author" content="pendar@google.com (Pendar Yousefi)" />
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/lib/jquery/jquery-2.0.3.js"></script>
    <script src="/lib/angular/angular-1.0.8.min.js"></script>
    <script src="/lib/js-yaml/js-yaml.js"></script>
    <script src="/lib/markdown/markdown.js"></script>
    <script src="/app/main.js"></script>
    <script src="/js/WallopSlider.js"></script>
  </head>
  <body class="compass">
    <header id="header">
      <nav>
        <a class="logo" href="/">
          Pendar Yousefi
        </a>
       
        <ul class="social">
          <li><a class="twitter" href="http://www.twitter.com/legofish" target="_blank"><span class="symbol">&#xe086;</span></a></li>
          <li><a class="dribbble" href="http://www.dribbble.com/legofish" target="_blank"><span class="symbol">&#xe021;</span></a></li>
          <li><a class="linkedin" href="https://www.linkedin.com/pub/pendar-yousefi/b/315/46a" target="_blank"><span class="symbol">&#xe052;</span></a></li>
        </ul>
      </nav>
    </header>
    <section id="content">
      <section id="project-details" class="compass">
        <header>
          <h6>Project compass</h6>
          <h2>What if AdWords adapted its UI to advertisers' goals?</h2>
          <br/>

          <div class="credits cf">
            <ul class="team">
              <li><strong>UX Lead:</strong> Pendar Yousefi</li>
              <li><strong>PM:</strong> Ash Ahluwalia</li>
              <li><strong>TL:</strong> Zheng Xia</li>
              <li><strong>UER:</strong> Jan Blom & Susan Petrick</li>
              <li><strong>ED:</strong> Kristen Wong</li>
            </ul>
            <div class="meta">
              <span class="size xl"><strong>  Size:</strong> XL <em class="bars"><i></i><i></i><i></i><i></i></em></span>
              <span class="impact xl"><strong> Impact:</strong> Critical <em class="bars"><i></i><i></i><i></i><i></i></em></span>
            </div>
          </div>
          <div class="links">
            <a href="https://docs.google.com/a/google.com/document/d/1s0E40lj-VGaEIQ-0sBmAmyHwhLT7vUfQSKmTIXV0qzo/edit?usp=drive_web" target="_blank"><img src="/img/icon_doc.svg"> PRD</a>
            <a href="https://folio.googleplex.com/awux/adwords/campaigns/display/marketing-objectives/_archive" target="_blank"><img src="/img/icon_design.svg"> Design <br/> archives </a>
            <a href="http://go/compass-uxr" target="_blank"><img src="/img/icon_code.svg"> Protoytpe </a>
            <a href="https://docs.google.com/a/google.com/presentation/d/1tOdybCABBOFP0g5XOBixhZdT8vfBJMqrXNnVaDl2TAs/edit#slide=id.p" target="_blank"><img src="/img/icon_presentation.svg" target="_blank"> Usability<br/>  study</a>
            <a href="https://folio.googleplex.com/awux/adwords/campaigns/display/marketing-objectives/_archive/v4_uxr#%2F0_0.html" target="_blank"><img src="/img/icon_presentation.svg"> UX Review  </a>
          </div>
        </header>
        <article class="value">
          <hgroup>
          <span class="underlay">45</span>
            <h6>Motivation</h6>
            <p class="lead"> Prior to this, AdWords required advertisers to translate their business goals into our technical structure, causing ~45% of advertisers to stop spending because they couldn’t configure well-performing campaigns. 
          </hgroup>
        </article>
        <article class="value">
          <h6>my role</h6>
          <h2> Leading UX</h2>
          <p class="colz-2"> I designed a new goal-based UI framework for campaign creation in AdWords display that is based on advertisers’ individual objective. Working directly with our PM director and other PMs, I established a flexible platform-wide UI that uses goals to expose relevant features during campaign creation, simplifying the process.</p>
        </article>
        <article class="process right cf">
          <hgroup>
            <h6>Process</h6>
            <h3> Simplifying complexity </h3>
            <p> We had a complex list of different 'goals' to work with, with lots of exceptions and special cases. To complicate things further, each product area within AdWords focuses on a different set of goals. The challenge was finding a UI framework that supports this while still being user-friendly. </p>
            <p>Early on, I started <a class="simple" href="https://folio.googleplex.com/awux/adwords/campaigns/display/marketing-objectives/_archive/v1#%2Fconcepts-pendar-v2-01.png" target="_blank">wireframing uniquely different concepts</a>, and tested them to find the mechanism users find easiest to use.</p>

          </hgroup>
          <img src="/img/compass/wireframes.png"><br/>
          <img src="/img/compass/wireframes2.png">
        </article>
        <article class="process left cf" style="padding-bottom:200px;">
          <hgroup>
          <h6>Process</h6>
          <h3> Flexible visual design </h3>
          <p> The final design for the 'goal' picker offered flexbility for all campaign types across AdWords. Some campaign types (like Display) could have all goal categories exposed, while others (like Search) could put more focus on a specific goal category.<br>
            <a class="simple" href="http://go/dtt-proto">Final html prototype</a><br>
            <a class="simple" href="http://go/dtt-uer">Usability test report</a>
          </p>
          </hgroup>

          <div class="wallop-slider wallop-slider--fade">
            <ul class="wallop-slider__list">
              <li class="wallop-slider__item wallop-slider__item--current">
                <div class="img-wrapper">
                  <img src="/img/compass/1.png">
                </div>
               
              </li>
              <li class="wallop-slider__item">
                 <div class="img-wrapper">
                  <img src="/img/compass/2.png">
                </div>
                
              </li>
              <li class="wallop-slider__item">
                <div class="img-wrapper">
                  <img src="/img/compass/3.png">
                </div>
               
              </li>
              <li class="wallop-slider__item">
                <div class="img-wrapper">
                  <img src="/img/compass/4.png">
                </div>
                 
              </li>
            </ul>
            <button href="javascript:;" class="btn_prev wallop-slider__btn wallop-slider__btn--previous" disabled="disabled">‹</button>
            <button href="javascript:;"  class="btn_next wallop-slider__btn wallop-slider__btn--next">›</button>
          </div>

        </article>
        <article class="process middle cf">
          <hgroup>
            <h6>user delight</h6>
            <h3> Introducing animations</h3>
            <p> I used subtle, delightful animations as a light-weight mechanism for exposing restrictions. For example, to demonstrate only one goal 'category' can be selected at a given time, I use a 'shaking' animation when the user tries to select goals from more than one category. <a href="http://go/compass-uxr" target="_blank" class="simple">See it live in the prototype </a></p>

          </hgroup>
          <img style="margin-top:50px" src="/img/compass/animation.gif">
        </article>
        <article class="process middle">
          <hgroup>
            <h6>beyond adwords display</h6>
            <h3> Goal-based UIs</h3>
            <p> I have been happy to consult other teams/areas sharing my knowledge about how to implement goal-based flows. If you are working on a goal-related project, please reach out to me pendar@ and I would be happy to chat.</p>

          </hgroup>
         
        </article>
        <article class="process">
          <a class="btn" href="http://go/compass-uxr" target="_blank">
            See live prototype 
          </a>
        </article>

      </section>
    </section>
   <div class="wrapper">
   </div>
  </body>
  
  <script>
  $(document).ready(function(){

   
    var slider = new WallopSlider('.wallop-slider');

    var months = monthDiff(
        new Date(2013, 07, 29), // November 4th, 2008
        new Date()  // March 12th, 2010
    );
    console.log( months);
  });

  function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}
  </script>
</html>
